<template>
	<scroll-view class="product-detail-root" @scrolltolower="lower">
		<view class="product-detail-picture">
			<image class="product-detail-image" :src="imageSrc==''? '/static/images/load_fial_image.png':imageSrc" mode="scaleToFill" @error="imageError"></image>
		</view>
		
		<view class="product-detail-content-layer">
			<view class='product-detail-price-layout'>
				<view class='money-symbol'>￥</view>
				{{productData.pricePerMonth}}
				<view class='money-symbol'>/月</view>
				<view class='price-type'>主机</view>
			</view>
			
			<view class='price-deputy' v-show='userType != "1"'>
				{{"副机 ￥"+productData.subPricePerMonth+"/月"}}
			</view>
			
			<view class='description'>
				{{productData.description}}
			</view>
			<!-- 活动 -->

			<view class='product-detail-line' style='height:15rpx'></view>
				<view class='explain-layout'>产品名称：
				<view class='explain-value'>{{productData.productName}}</view>
			</view>
			
			<view class='product-detail-line'></view>
				<view class='explain-layout'>所属网络：
				<view class='explain-value'>{{productData.netName}}</view>
			</view>
			
			<view class='product-detail-line' v-if='!isBuy'></view>
			<view class='explain-layout' v-if='!isBuy'>
				到期时间：
				<view class='explain-value'>{{expiryTime}}</view>
			</view>
			<view class='product-detail-line'></view>
			<view class='explain-layout'>包含频道:</view>			
		</view>
		
		<view style="min-height:400rpx">
			<view class="channel-list">
				<view class="channel-item" v-for="(item,index) in productData.serviceIncluded" :key="index">
					<view class='channel-text'>
						{{item.serviceName}}
					</view>
				</view>
			</view>
		</view>
		<view class='footer-layout' v-bind:style ='isBuy?" margin-bottom: 100rpx;":" margin-bottom: 0rpx;"'>—— 已经到底了 ——</view>
	</scroll-view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import httpRequest from '@/utils/utilHttp.js'
	
	export default {
		computed:{
			...mapState(['hasLogin', 'userInfo']),
		},
		data() {
			return {
				imageSrc:'',
				productData: null, // 产品数据
				toLower: false, // 是否滑动到底部
				userType: '', // 用户类型
				isBuy: true, // true 可购买 false 不可购买
				expiryTime: '', // 到期时间
			}
		},
		
		onLoad(options){
			uni.setNavigationBarTitle({
				title:"产品详情",
			})
			//console.log('onload options:');			
			var self = this;
			self.productData = JSON.parse(options.productData);
			self.isBuy = options.isBuy === "true" ? true : false;
			self.expiryTime= options.expiryTime ? options.expiryTime : '';
			self.getProductImgUrl(self.productData.imageUrl);
		},
		methods: {
			...mapMutations(['login', 'logout']), //对全局方法 login进行监控
			imageError: function(e){
				var self = this;
				self.imageSrc = '/static/images/load_fial_image.png';
			},
			lower: function(e) {
				//console.log('scroll to ......')
				//console.log(e);
			},
			getProductImgUrl:function(icon) {
				let options = {
					url:httpRequest.requestUrl.imageUrl + icon						
				};
				httpRequest.DownloadFile(options).then(res => {						
					if(res.statusCode == 200){						
						var tempImagePath = uni.getStorageSync('tempImagePath');
						if (tempImagePath && tempImagePath[icon]) {							
							self.imageSrc = tempImagePath[icon];				     
						}else{							
							self.imageSrc = '/static/images/load_fial_image.png'; 
						} 
					}
					else{
						self.imageSrc = '/static/images/load_fial_image.png'; 
					}
				})								
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1;
	}
	.product-detail-root{
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: white;
	}
	.product-detail-picture{
		width: 100%;
		height: 450rpx;
	}
	.product-detail-image{
		width: 100%;
		height: 100%;
	}
	.product-detail-content-layer{
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-top: 20rpx;
	}
	.product-detail-price-layout{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		color: red;
		font-size: 50rpx;
		padding-left: 20rpx;
	}
	.money-symbol{
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}
	.price-type{
		background-color: #00b9ef;
		color: white;
		font-size: 20rpx;
		padding: 2rpx;
		border-radius: 5rpx;
		margin-left: 5rpx;
		margin-bottom: 15rpx;
	}
	.price-deputy{
		font-size: 24rpx;
		color: #999;
		padding-left: 20rpx;
	}
	.description{
		font-size: 32rpx;
		color: #333;
		margin: 10rpx 0rpx 20rpx 0rpx;
		padding-left: 20rpx;
	}
	.activity-hint{
		color: red;
		font-size: 26rpx;
		margin-left: 20rpx;
		border-bottom: 1rpx solid red;
	}
	.product-detail-line {
	  width: 100%;
	  height: 2rpx;
	  background-color: rgba(0, 0, 0, 0.1);
	}
	.explain-layout{
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #999;
		font-size: 28rpx;
		margin: 20rpx 0rpx 20rpx 20rpx;
	}
	.explain-value{
		color: #333;
		margin-left: 20rpx;
	}
	.channel-list{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}
	.channel-item{
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.channel-text{
		border: 1rpx none rgba(0, 0, 0, 0.2);
		border-radius: 20rpx;
		background-color: rgba(0, 0, 0, 0.2);
		padding: 10rpx 20rpx 10rpx 20rpx;
		margin: 10rpx 0rpx 10rpx 0rpx;
	}
	.footer-layout{
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 100rpx;
		background-color: rgba(0, 0, 0, 0.1);
		color: #333;
		font-size: 24rpx;
	}
</style>
